<template>
    <div class="index-card-wrapper" :style="{ 'width': width }">
        <div class="index-card">
            <div class="number">
                {{ number }}<small>{{ unit }}</small>
            </div>
            <div class="text" :style="{ backgroundColor: color }">
                {{ title }}
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "",
        data() {
            return {};
        },
        props: {
            number: {
                type: Number,
                default:0
            },
            unit: {
                type: String,
            },
            title: {
                type: String,
            },
            color: {
                type: String,
            },
            width: {
                type: String,
            },
        },
    };
</script>

<style lang="" scoped>
</style>